<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="./vue.js"></script>
    <title></title>
  </head>
  <body>
      <div id="root">
          <input v-model:value="inputValue" />
          <button @click="handleClick">提交</button>
          <ul>
            <todo-item
              v-for="(item, index) of list"
              :key="item"
              :content="item"
              :index="index"
              @delete="handleDelete"
            ></todo-item>
          </ul>
      </div>
      <script>
        // 全局组件，每一个组件都是一个vue的实例
        Vue.component('todo-item', {
          props: ['content', 'index'],
          template: '<li @click="handleClick">{{content}}</li>',
          methods: {
            handleClick: function() {
              alert(this.$props.index + '------' + this.$props.content)
              this.$emit('delete', this.$props.index)
            }
          }
        })
        // 局部组件
        // var TodoItem = {
        //   template: '<li>item</li>'
        // }
        new Vue({
            el: '#root',
            // 注册局部组件
            // components: {
            //   'todo-item': TodoItem
            // },
            data: {
              inputValue: '',
              list: []
            },
            methods: {
              handleClick: function() {
                this.$data.list.push(this.$data.inputValue);
                this.$data.inputValue = ''
              },
              handleDelete: function(index) {
                this.$data.list.splice(index);
              }
            }
        })
      </script>
  </body>
</html>
